<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row>

      <el-col :span="24">
        <el-row :gutter="0">
          <el-col :span="24">
            <div class="panel-group2">
              <div class="f_20 f_bold" style="margin-bottom: 20px;">公告列表</div>


              <el-table :data="NoticeList" style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="title" label="标题">
                  <template slot-scope="scope">
                    <!-- <a :href="handleUpdate(scope.row)">{{ scope.row.title }}</a> -->
                    <div class="cursor" @click="handleUpdate(scope.row)">{{ scope.row.title }}</div>
                  </template>
                </el-table-column>

                <el-table-column prop="created_at" label="时间"></el-table-column>


                <el-table-column label="操作" width="60">
                  <template slot-scope="scope">
                    <div class="row center">
                      <div style="color: #00A30F;" class=" cursor" @click="handleUpdate(scope.row)">详情</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <div class="center ">
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.noPage"
                  :limit.sync="queryParams.pageSize" @pagination="getList" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="open" width="65%" append-to-body style="margin-top: 6%;" center>
      <div class="column center">
        <div style="color: #448DFF;" class="f_20 f_bold">{{noticeInfo.title}}</div>
      </div>

      <div class="mt10" style="#ABABAB">发布于{{noticeInfo.created_at}}</div>

      <div class="f_18" style="#000000" v-html="noticeInfo.content"></div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import CountTo from 'vue-count-to';
  import Cookies from 'js-cookie';
  import Vue from 'vue';

  import Navvz from '@/components/Navvz';
  import Sidebartss from '@/components/Sidebartss';
  import * as Database from '@/api/system/database';
  import * as Auth from '@/utils/auth';
  import * as Games from '@/api/system/games';
  import * as Notice from "@/api/system/notice";

  export default {
    name: 'Index',
    components: {
      CountTo,
      Navvz,
      Sidebartss
    },
    data() {
      return {
        open: false,
        NoticeList: [], //通知公告列表
        user_id: '',
        game_name: '',
        id: '', //更新id
        mysqlList: [],
        fileList: [],
        noticeInfo: '',
        editFiles: [],
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        upload_url_all: process.env.VUE_APP_BASE_URL + '/file/uploadAll',
        headers: Auth.getHeader(),
        logo: '',
        // 总条数
        total: 0,
        // 字典表格数据
        tableData: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open_zsf: false,
        open: false,
        openNy: false,

        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
        },
        loading: false
      };
    },
    created() {

      this.getList();

      this.user_id = localStorage.getItem('user_id')
    },
    mounted() {},
    methods: {

      // 取消按钮
      cancel() {
        this.open = false;
      },
      handleUpdate(row) {

        this.loading = true;
        var per = {}
        per.type_pj = 1
        per.ulid = row.ulid
        Notice.detail(per).then(response => {
          this.open = true;
          this.noticeInfo = response.data.info
          this.loading = false;
        })
      },

      /**通知，公告 */
      getList() {
        console.log('呀或勤劳')
        this.loading = true;
        this.queryParams.type_pj = 1

        Notice.getList(this.queryParams).then(response => {
          this.NoticeList = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;
        });
      },

    }
  };
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
  }




  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 800px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    min-height: 600px;
  }
</style>
